<template>
	<div class="approvalList">
		<!-- 依托答辩 ***** -->
		<div class="bg-box"></div>
		<van-tabs v-model="active" background="transparent" color="#fff" line-height="2px" line-width="55px" title-inactive-color="#fff" title-active-color="#fff" @change="tabsChange">
			<van-tab v-for="(item, index) in tabsTitle" :key="index" :title="item">
				<div class="page-wrapper">
					<div class="select-group">
						<div class="select-box" @click="showType = true">
							类型
							<van-icon name="arrow-down" />
						</div>
						<div class="select-box" @click="applicant">
							申请人
							<van-icon name="arrow-down" />
						</div>
						<div class="select-box" @click="show = true">
							日期
							<van-icon name="arrow-down" />
						</div>
					</div>
					<div class="search-box">
						<van-icon name="search" />
						<input type="text" v-model="form.hospital_key" placeholder="请输入医院名称搜索" @keyup.enter="handleSearch" />
					</div>
					<van-list v-model="form.loading" :finished="list.length == total" finished-text="没有更多了" @load="loaderMore">
						<div class="list-box">
							<div class="list-item" v-for="(item, index) in list" :key="index" @click="detail(item)">
								<p class="name" v-if="item.hospital">{{ item.hospital.title }}</p>
								<p class="label">类型：{{ getType(item.type) }}</p>
								<p class="label">
									金额：<span>￥{{ item.amount }}</span>
								</p>
								<p class="time">{{ getTime(item.createtime) }}</p>
								<div class="state" :class="[{ green: item.is_verify == 2 }, { red: item.is_verify == 3 }]">
									{{ getVerify(item.is_verify) }}
								</div>
							</div>
						</div>
					</van-list>
				</div>
			</van-tab>
		</van-tabs>
		<van-popup v-model="show" position="bottom">
			<van-datetime-picker v-model="currentDate" type="date" title="选择完整时间" :min-date="minDate" :max-date="maxDate" @cancel="show = false" @confirm="handleTime" />
		</van-popup>
		<van-popup v-model="showType" position="bottom">
			<van-picker title="类型" show-toolbar :columns="columns" @confirm="onConfirm" @cancel="showType = false" />
		</van-popup>
	</div>
</template>

<script>
	import { mapGetters, mapMutations } from "vuex";
	import moment from "moment";
	export default {
		data() {
			return {
				active: 0,
				tabsTitle: ["待处理", "已处理", "抄送我"],
				currentDate: new Date(),
				minDate: new Date(2020, 0, 1),
				maxDate: new Date(2100, 10, 1),
				columns: ["全部", "入账", "出账"],
				show: false,
				showType: false,
				form: {
					page: 1,
					start_time: "",
					end_time: "",
					type: "",
					type_status: 1,
					hospital_key: "",
					user_id: "",
					loading: false,
				},
				list: [],
				total: 0,
				// 是否跳转
				jump: false,
			};
		},
		activated() {
			if (!this.jump) {
				this.list = [];
				this.form.page = 1;
				this.onLoad();
			}
			this.jump = true;
		},
		mounted() {
			this.active = this.activeIndex;
			this.$bus.$on("approvalList:search", (data) => {
				this.list = [];
				this.form = data;
				this.form.page = 1;
				this.onLoad();
			});
		},
		computed: {
			...mapGetters(["resultList", "activeIndex", "searchForm"]),
		},
		methods: {
			...mapMutations(["set_active", "SET_SEARCH"]),
			async onLoad() {
				this.form.loading = true;
				const res = await this.$api.bill_lists(this.form);
				if (res.code == 1) {
					this.form.loading = false;
					this.list.push(...res.data.data);
					this.total = res.data.total;
				}
			},
			// 加载更多
			loaderMore() {
				if (this.list.length && this.list.length < this.total) {
					this.form.page += 1;
					this.onLoad();
				}
			},
			// 按时间搜索
			handleTime(value) {
				this.list = [];
				this.form = {
					...this.form,
					page: 1,
					start_time: new Date(`${moment(value).format("YYYY-MM-DD")} 00:00:00`).getTime() / 1000,
					end_time: new Date(`${moment(value).format("YYYY-MM-DD")} 23:59:59`).getTime() / 1000,
				};
				this.onLoad();
				this.show = false;
			},
			// 类型
			onConfirm(value, index) {
				this.list = [];
				this.form = {
					...this.form,
					page: 1,
					type: index,
				};
				this.onLoad();
				this.showType = false;
			},
			// 搜索
			handleSearch(val) {
				this.list = [];
				this.form = {
					...this.form,
					page: 1,
				};
				this.onLoad();
			},
			// tabs切换事件
			tabsChange(val) {
				this.active = val;
				this.list = [];
				this.form = {
					...this.form,
					page: 1,
					user_id: "",
					hospital_key: "",
					type_status: (val += 1),
				};
				this.onLoad();
			},
			// 跳转申请人
			applicant() {
				this.$bus.$emit("selectView:clear");
				this.SET_SEARCH(this.form);
				this.$router.push({ path: "/selectView", query: { id: this.active } });
			},
			// 跳转详情
			detail(item) {
				this.SET_SEARCH(this.form);
				this.$router.push({ path: "/detail", query: { id: item.id } });
			},
			getType(type) {
				const status = {
					1: "入账",
					2: "出账",
				};
				return status[type] || "未知状态";
			},
			getVerify(verify) {
				const status = {
					"-1": "审批中",
					0: "审批中",
					1: "审批中",
					2: "已通过",
					3: "已驳回",
				};
				return status[verify] || "未知状态";
			},
			getTime(time) {
				return moment(time * 1000).format("YYYY-MM-DD HH:mm");
			},
		},
	};
</script>

<style lang="scss" scoped>
	.approvalList {
		min-height: 100vh;
		padding-bottom: 70px;

		.bg-box {
			height: 11rem;
			background: linear-gradient(to bottom, #51b1c1, #f6f6f6);
			position: fixed;
			width: 100%;
		}

		::v-deep .van-tabs__wrap {
			border-bottom: 1px solid #85c5cf;

			.van-tab--active {
				span {
					font-weight: bold;
				}
			}
		}

		.page-wrapper {
			.select-group {
				display: flex;
				justify-content: space-around;
				align-items: center;
				height: 1.2rem;

				.select-box {
					display: flex;
					align-items: center;
					color: #fff;

					.van-icon {
						margin-left: 2px;
					}
				}
			}

			.search-box {
				width: 9.2rem;
				background: #fff;
				margin: 0 auto;
				border-radius: 4px;
				height: 0.91rem;
				padding: 0 0.35rem;
				display: flex;
				align-items: center;

				.van-icon {
					font-size: 16px;
					margin-right: 0.16rem;
				}

				input {
					flex: 1;
					line-height: 0.91rem;
				}
			}

			.list-box {
				width: 9.2rem;
				margin: 0.27rem auto 0;

				.list-item {
					width: 100%;
					height: 3.84rem;
					border-radius: 4px;
					background-color: #fff;
					margin-bottom: 0.27rem;
					padding: 0.61rem;
					position: relative;

					p.name {
						font-size: 17px;
						margin-bottom: 0.32rem;
					}

					p.label {
						font-size: 12px;
						color: #707070;
						margin-bottom: 0.27rem;

						span {
							color: #e00a0a;
						}
					}

					p.time {
						font-size: 10px;
						margin-top: 0.59rem;
						color: #707070;
					}

					.state {
						position: absolute;
						right: 0;
						top: 0.53rem;
						width: 1.65rem;
						height: 0.67rem;
						line-height: 0.67rem;
						background-color: #f06600;
						font-size: 12px;
						color: #fff;
						padding-left: 0.45rem;
						border-top-left-radius: 15px;
						border-bottom-left-radius: 4px;

						&:after {
							content: "";
							position: absolute;
							width: 0.08rem;
							height: 0.08rem;
							background-color: #fff;
							border-radius: 50%;
							left: 0.24rem;
							top: 0.29rem;
						}

						&.green {
							background-color: #35bd00;
						}

						&.red {
							background-color: #dc2020;
						}
					}
				}
			}
		}
	}
</style>
